<template>
  <ul v-if="totalCount" class="joe_pagination">
    <li class="prev" v-if="currentPage != 1">
      <nuxt-link class="li-page" :to="{path:'/'+type+'-'+ (id? id+'-':'')+(currentPage - 1)+'.html'}">
          上一页
      </nuxt-link>
    </li>

      <template v-for="(i, index) in showPageBtn">
          <li :class="{ active: i === currentPage }" v-if="i">
            <nuxt-link  :to="{path:'/'+type+'-'+ (id? id+'-':'')+i+'.html'}">
            <span>{{ i }}</span>
            </nuxt-link>
          </li>

        <li  v-else :class="{ active: i === currentPage }">
          <span>···</span>
        </li>
      </template>
    <li class="next" v-if="currentPage != totalPage">
      <nuxt-link class="li-page" :to="{path:'/'+type+'-'+  (id? id+'-':'') +(currentPage + 1)+'.html'}">
          下一页
      </nuxt-link>
    </li>
  </ul>

</template>
<script setup>

const props = defineProps(['currentPage','id','type','totalCount','limit'])
const currentPage = parseInt(props.currentPage?props.currentPage:1)
const id = props.id?props.id:0
const type = props.type?props.type:"category"
const totalCount = props.totalCount?props.totalCount:1
const limit = props.limit?props.limit:10

const totalPage = Math.ceil(totalCount / limit);

const pageList = ref()

function showPageBtn() {
  const pageNum = totalPage
  const index = currentPage
  if (pageNum <= 5) return  [...new Array(pageNum)].map((v, i) => i + 1)
  if (index <= 2)  return  [1, 2, 3, 0, pageNum]
  if (index >= pageNum - 1)  return  [1, 0, pageNum - 2, pageNum - 1, pageNum]
  if (index === 3)  return  [1, 2, 3, 4, 0, pageNum]
  if (index === pageNum - 2)
    return  [1, 0, pageNum - 3, pageNum - 2, pageNum - 1, pageNum]
  return  [1, 0, index - 1, index, index + 1, 0, pageNum]
}

</script>
<style lang="scss">
.joe_pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0;
  padding: 0;
}

.joe_pagination li {
  margin-left: 5px;
  display: block;
  height: 32px;
  line-height: 32px;
  padding: 0 15px;
  color: #fff;
  border-radius: 3px;
  background: linear-gradient(to right, #409eff, #05D1D3);
  font-size: 12px;
  box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
}
.joe_pagination li.next{
  margin-left: auto;
}
.joe_pagination li.active a {
  height: 32px;
  line-height: 32px;
  background: #409eff;
  color: #fff;
  font-weight: 500
}

.joe_pagination li a {
  display: block;
  color: #fff;
  transition: background 0.35s, color 0.35s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.joe_pagination li:hover {
  -webkit-animation: pulse 1s;
  animation: pulse 1s;
  box-shadow: 0 0 0 20px rgba(255, 255, 255, 0)
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #409eff;
  }
}
.joe_pagination li a:hover .icon {
  fill: #fff
}

.joe_pagination li a .icon {
  width: 12px;
  height: 12px;
  fill: var(--routine);
  transition: fill 0.35s
}

.joe_pagination li a .icon-next {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}
</style>
